<!-- table首页 -->
<template>
  <div class="tabel-demo">
    <div>
      <div class="header-button">
        <PageSearch
          :searchConfig="state.searchConfig"
          :searchObject="state.searchObject"
          @onSearch="onSearch"
          @onInputArea="searchInputArea"
          @onInputPhone="searchInputPhone"
        ></PageSearch>
      </div>
      <PageList
        v-model:pageSize="pageSize"
        v-model:currentPage="pageIndex"
        :total="total"
        @paginationFn="getListData"
      >
        <ProTable
          :loading="state.loading"
          :columns="state.tableColumns"
          :processTableData="state.processTableData"
        >
        </ProTable>
      </PageList>
    </div>
  </div>
</template>

<script setup>
import { reactive, ref, onMounted, onUnmounted } from 'vue'
import { ElMessage } from 'element-plus'
import { getList, getItem, updateItem, deleteItem } from '@/api/user'
// import Dialog from './DialogPop/index.vue'
// import AddFormPage from '@/views/ComponentView/pageComp/tableDemo1/addFormPage.vue'
import { useCounterStore } from '@/stores/counter.js'
// import router from '@/router/index'
// import stateData from '@/views/ComponentView/index.js'

const store = useCounterStore()
let pageSize = ref(12) // 单页容量
let pageIndex = ref(1) // 当前页码
let total = ref(0) // 总计数据量
const addFormPage = ref(null) // 获取form的dom节点
const state = reactive({
  //   ...stateData,
  // 配置可查询字段，key为table每列的key--tableColumns的prop
  searchObject: {
    activeNum: '',
    activeName: '',
    activeStatus: '',
    date: ''
  },
  // 配置查询的slot类别及可查询的key，value为key值
  searchConfig: [
    { label: '活动编码', type: 'input', value: 'activeNum' },
    { label: '活动名称', type: 'input', value: 'activeName' },
    {
      label: '活动状态',
      type: 'select',
      value: 'activeStatus',
      options: [
        { label: '运行中', value: '运行中' },
        { label: '已结束', value: '已结束' }
      ]
    },
    { label: '申请时间', type: 'daterange', value: 'date' }
  ],
  loading: false,
  tableColumns: [
    { prop: 'activeNum', label: '活动编码', width: '160' },
    { prop: 'activeName', label: '活动名称' },
    { prop: 'ywcj', label: '业务场景' },
    { prop: 'activeStatus', label: '活动状态' },
    { prop: 'startDate', label: '开始日期' },
    { prop: 'endDate', label: '结束日期' }
  ],
  processTableData: [] // 表体数据
  // isShowForm: false // 控制form表单显隐
})

onMounted(() => {
  getListData()
})

onUnmounted(() => {})

/**
 * @description 获取表格数据
 */
const getListData = () => {
  state.loading = true
  let params = {
    pageIndex: pageIndex.value,
    pageSize: pageSize.value
  }
  getList(params).then(res => {
    // console.log(res, 'res')
    const { records, code, total: count } = res.data
    if (!records && code !== 200) {
      return
    }
    state.processTableData = records
    total.value = count
    state.loading = false
  })
}

/**
 * @description table操作--查找
 */
const onSearch = () => {
  console.log('搜索')
  searchFilter(state.processTableData, state.searchObject)
}
// 搜索节流操作

const throttle = (fn, delay) => {
  let valid = true
  return function () {
    let context = this
    let args = arguments
    if (!valid) {
      return false
    }
    valid = false
    setTimeout(() => {
      //console.log('coming');
      //fn();
      fn.apply(context, args)
      valid = true
    }, delay)
  }
}
const searchInputArea = throttle(onSearch, 2000)

// 搜索防抖操作
const debounce = (fn, delay) => {
  let timer = null
  return function () {
    let context = this
    let args = arguments
    clearTimeout(timer)
    timer = setTimeout(function () {
      fn.apply(context, args)
    }, delay)
  }
}

const searchInputPhone = debounce(onSearch, 1000)
/**
 * @description 根据key过滤表格中的值
 */
function searchFilter(tableData, val) {
  let arr = []
  if (val.activeNum || val.activeName || val.activeStatus || val.date) {
    if (val.activeNum) {
      arr = tableData.filter(value => {
        return value.activeNum.indexOf(val.activeNum) !== -1
      })
    }
    if (val.activeName) {
      arr = tableData.filter(value => {
        return value.activeName.indexOf(val.activeName) !== -1
      })
    }
    if (val.activeStatus) {
      arr = tableData.filter(value => {
        return value.activeStatus.indexOf(val.activeStatus) !== -1
      })
    }
  } else {
    getListData()
  }
  state.processTableData = arr // 过滤后的值赋给表格
}

/**
 * @description table操作--编辑
 */
const editRow = id => {
  getItem({ id }).then(res => {
    const { data } = res.data
    addFormPage.value.updateMyForm(data) // 调用子组件updateMyForm方法，将form绑定值更新
  })
  getListData()
}

/**
 * @description form返回上一页，切换回table页面
 */
const goBack = () => {}

/**
 * @description dialog取消--关闭dialog
 */
const dialogCancel = () => {
  state.isShowDemo1Dialog = false
}

/**
 * @description dialog关闭动画结束时的回调
 */
const dialogClosed = () => {
  state.isShowDemo1Dialog = false
}
</script>

<style lang="scss" scoped>
.tabel-demo {
  background: #ffffff;
}

.header-button {
  display: flex;
  flex-direction: row;
}

.power-status {
  height: 35px;
  padding: 4px 8px;
  box-sizing: border-box;
  font-family: PingFangSC-Regular;
  font-size: 14px;
  line-height: 25px;
  font-weight: 400;
  border-radius: 5px;
  background: #f5fff6;
}
.power-status-success {
  color: #01a851;
  border: 1px solid #bcf3c4;
}
.power-status-danger {
  color: #fe4d4f;
  border: 1px solid #fe4d4f;
}
</style>
